<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>组件的事件</h2>
    <son @abc="appFn"></son>
  </div>

  <script src="../vue3.js"></script>
  <script>

    const {createApp} = Vue;

    const Son = {
      // 当子组件有事件需要提交的时候(需要去触发父组件的事件的时候),
      // 那么就必须只有一个根元素

      // vue2的时候，所有的组件都必须只有一个根元素



      // $emit()的第一个参数是自定义事件的名字
      // 还可以有后面的参数
      // 如果后面又很多个参数要传，建议用对象风格的提交方式


      // emits选项用于显示的申明有哪些自定义事件
      // 没有也不影响，vue2里面是没有这个emits选项的
      // emits: ['abc'], 

      // emits数组的形式是几乎没用的，但是还有对象的语法
      // 写成对象以后就可以对自定义事件的参数做校验了
      emits: {
        abc(payload) {
          return typeof payload === "number";
        }
      },
      template: `
        <div>
          <div>这是子组件</div>
          <button @click="$emit('abc', 111)">btn</button>
          <button @click="fn">btn</button>
        </div>
      `,
      methods: {
        fn() {
          this.$emit("abc", "222");
        }
      },
      mounted() {
        this.$emit("abc", 333);
      }
    }

    const app = createApp({
      components: {
        Son
      },
      methods: {
        appFn(n) {
          console.log("appFn", n);
        }
      }
    });

    app.mount("#app");
  </script>
</body>
</html>